<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>定义组件的两种方式</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>

<body>
	<div id="itany">
		<hello></hello>
		<my-world></my-world>
	</div>

	<script>
		/**
		 * 方式1：先创建组件构造器，然后由组件构造器创建组件
		 */
		//1.使用Vue.extend()创建一个组件构造器
		var MyComponent = Vue.extend({
			template: '<h3>Hello World</h3>'
		});
		//2.使用Vue.component(标签名,组件构造器)，根据组件构造器来创建组件
		Vue.component('hello', MyComponent);

		/**
		 * 方式2：直接创建组件(推荐)
		 */
		// Vue.component('world',{
		Vue.component('my-world', {
			template: '<h1>你好，世界</h1>'
		});

		var vm = new Vue({ //这里的vm也是一个组件，称为根组件Root
			el: '#itany',
			data: {
				msg: '前端'
			}
		});	
	</script>
</body>

</html>